<template>
  <view class="mine-container px-30" style="padding-top: 70px">
    <view class="user-info">
      <view class="user-avatar-wrap">
        <image src="@/static/images/mine/avatar.png" class="user-avatar" mode="widthFix"> </image>
      </view>
      <view class="username">{{ userData.staffName }}</view>
    </view>
    <view class="user-detail">
      <view class="user-detail-header">
        <view>我的基本信息</view>
        <view class="flex flex-center" @click="goBasicDetail()">
          <text>查看详情</text>
          <u-icon name="arrow-right" color="#ffffff" size="14"></u-icon>
        </view>
      </view>
      <view class="user-content">
        <view class="content-item">
          <view class="flex items-center">
            <image src="@/static/images/mine/icon-address.png" class="icon-item"> </image>
            <view class="item-label">手机号</view>
          </view>
          <view class="item-value">{{ userData.phone }}</view>
        </view>
        <view class="content-item">
          <view class="flex items-center">
            <image src="@/static/images/mine/icon-address.png" class="icon-item"> </image>
            <view class="item-label">岗位</view>
          </view>
          <view class="item-value line2">{{ userData.postNames }}</view>
        </view>
        <view class="content-item">
          <view class="flex items-center">
            <image src="@/static/images/mine/icon-dept.png" class="icon-item"> </image>
            <view class="item-label">组织机构</view>
          </view>
          <view class="item-value">{{ userData.deptName }}培训记录培训记录</view>
        </view>
        <view class="content-item">
          <view class="flex items-center">
            <image src="@/static/images/mine/icon-post.png" class="icon-item"> </image>
            <view class="item-label">最高学历</view>
          </view>
          <view class="item-value">{{ userData.educationLabel }}</view>
        </view>
      </view>
    </view>

    <view class="link-group">
      <view class="link-item" @click="goQualification">
        <image src="@/static/images/mine/icon-qu.png" class="icon-link"> </image>
        <view class="link-label">资质证书</view>
        <u-icon name="arrow-right" color="#999999" size="14"></u-icon>
      </view>
      <view class="link-item" @click="goTrainRecord">
        <image src="@/static/images/mine/icon-record2.png" class="icon-link"> </image>
        <view class="link-label">培训记录</view>
        <u-icon name="arrow-right" color="#999999" size="14"></u-icon>
      </view>
      <view class="link-item" @click="goExamRecord">
        <image src="@/static/images/mine/icon-record.png" class="icon-link"> </image>
        <view class="link-label">考试记录</view>
        <u-icon name="arrow-right" color="#999999" size="14"></u-icon>
      </view>
      <view class="link-item" @click="goIMEICode()">
        <image src="@/static/images/mine/icon-imei.png" class="icon-link"> </image>
        <view class="link-label">IMEI识别码</view>
        <view>{{ imeiCode ? imeiCode : '输入IMEI识别码' }}</view>
        <u-icon name="arrow-right" color="#999999" size="14"></u-icon>
      </view>
      <view class="link-item" @click="changePwd()">
        <image src="@/static/images/mine/icon-record.png" class="icon-link"> </image>
        <view class="link-label">修改密码</view>
        <u-icon name="arrow-right" color="#999999" size="14"></u-icon>
      </view>
      <view class="link-item" @click="checkUpdate()">
        <image src="@/static/images/mine/icon-cloud.png" class="icon-link"> </image>
        <view class="link-label">检查更新</view>
        <view>{{ versionName }}</view>
      </view>
    </view>

    <view class="logout" @click="handleLogout()">退出登录</view>
  </view>
</template>

<script>
import { getUserInfo } from '@/api/system/user.js'
import config from '@/config'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      api: config.baseUrl,
      userData: {},
      versionName: ''
    }
  },
  computed: {
    ...mapGetters(['imeiCode']),
    avatar() {
      return this.$store.state.user.avatar
    },
    username() {
      this.$store.state.user.username
    },
    windowHeight() {
      return uni.getSystemInfoSync().windowHeight - 50
    }
  },
  onShow() {
    if (process.env.NODE_ENV !== 'development') {
      // this.$store.dispatch("GetUpgradeInfo");
    }
    this.getVersionCode()
  },
  async onLoad(option) {
    let { data } = await getUserInfo()
    this.userData = data
    if (option && option.isShow) {
      this.$modal.msg('您还未录入IMEI识别码，请先完成录入，否则将无法进行管控排查。', 1500)
    }
  },
  methods: {
    onTabItemTap(e) {},
    goSign() {
      // uni.navigateTo({
      // 	url:'/pages/mine/sign/index'
      // })
      this.$modal.showToast('模块建设中~')
    },
    goBasicDetail() {
      uni.navigateTo({
        url: '/pages/mine/basic/index'
      })
    },
    goJob() {
      uni.navigateTo({
        url: '/pages/mine/job/index'
      })
    },
    goQualification() {
      uni.navigateTo({
        url: '/pages/mine/qualificationCertificate/index'
      })
    },
    goTrainRecord() {
      uni.navigateTo({
        url: '/pages/work/training-tasks/trainingRecord'
      })
    },
    goExamRecord() {
      uni.navigateTo({
        url: '/pages/work/online-examination/examRecord'
      })
    },
    goIMEICode() {
      uni.navigateTo({
        url: '/pages/mine/imei/index'
      })
    },
    handleToLogin() {
      this.$tab.reLaunch('/pages/login')
    },
    handleToAvatar() {
      this.$tab.navigateTo('/pages/mine/avatar/index')
    },
    handleLogout() {
      this.$modal.confirm('确定注销并退出系统吗？').then(() => {
        this.$store.dispatch('LogOut').then(() => {
          this.$tab.reLaunch('/pages/login')
        })
      })
    },
    handleTodo() {
      this.$modal.showToast('模块建设中~')
      // uni.showModal({
      // 	title: '提示',
      // 	content: '这是一个模态弹窗',
      // 	success: function (res) {
      // 		if (res.confirm) {
      // 			console.log('用户点击确定');
      // 		} else if (res.cancel) {
      // 			console.log('用户点击取消');
      // 		}
      // 	}
      // });
    },
    getVersionCode() {
      // #ifdef APP-PLUS
      plus.runtime.getProperty(plus.runtime.appid, (info) => {
        this.versionName = info.version
      })
      // #endif
    },
    // 检查升级
    checkUpdate() {
      // 检查升级
      this.$store.dispatch('GetUpgradeInfo').catch((e) => {
        uni.showToast({
          title: '已是最新版',
          icon: 'none'
        })
      })
    },
    changePwd() {
      uni.navigateTo({
        url: '/pages/mine/pwd/index'
      })
    }
  }
}
</script>

<style lang="scss">
.mine-container {
  background: url('@/static/images/mine/bg-mine.png') top center no-repeat;
  background-size: 100% 564rpx;
  min-height: 100vh;
  .logout {
    margin-bottom: 40rpx;
    height: 100rpx;
    background: #fff;
    border: 1px solid #2ac0c8;
    font-size: 36rpx;
    color: #2ac0c8;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .link-group {
    background: white;
    border-radius: 20rpx;
    margin-bottom: 30rpx;
    .link-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 100rpx;
      padding: 0 20rpx;
      border-bottom: 1rpx solid #f1f1f5;
      color: #333;
      &:last-child {
        border: 0 none;
      }
    }
    .icon-link {
      height: 40rpx;
      width: 40rpx;
      display: inline-block;
      margin-right: 20rpx;
    }
    .link-label {
      font-weight: 400;
      font-size: 32rpx;
      color: #333333;
      text-align: left;
      flex: 1;
    }
  }
  .content-item {
    width: 50%;
    padding-left: 60rpx;
    height: 110rpx;
    .icon-item {
      width: 34rpx;
      height: 34rpx;
      margin-right: 4rpx;
    }
    .item-label {
      font-size: 24rpx;
      color: #999999;
    }
    .item-value {
      margin-top: 4rpx;
      font-size: 26rpx;
      color: #333333;
    }
  }
  .user-info {
    display: flex;
    align-items: center;
    margin-bottom: 60rpx;
  }
  .user-avatar-wrap {
    width: 160rpx;
    height: 160rpx;
    padding: 10rpx;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 160px;
    margin-right: 40rpx;
    .user-avatar {
      width: 100%;
      border-radius: 160px;
      height: 100%;
      display: block;
    }
  }
  .username {
    font-weight: 500;
    font-size: 44rpx;
    color: #185b5e;
    font-style: normal;
    text-transform: none;
  }
  .user-detail {
    height: 350rpx;
    background: #2ac0c8;
    border-radius: 20rpx;
    padding: 10rpx;
    margin-bottom: 30rpx;
  }
  .user-detail-header {
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10rpx;
    color: white;
    font-size: 30rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;
  }
  .user-content {
    background: #fff;
    height: 260rpx;
    border-radius: 12rpx;
    padding-top: 40rpx;
    display: flex;
    flex-wrap: wrap;
  }
}
</style>
